<template>
  <div class="app-wrapper">
    <headerTitle :titleList="titleList" :hideButton="true" />
    <div class="app-container">
      <div class="block containerMain" ref="block">
        <div class="tab-container">
          <div class="upload-file">
              <el-upload
                class="upload-demo"
                ref="uploadBatch"
                action="string"
                accept=".mp4"
                :show-file-list='false'
                :on-change="handleChange"
                :http-request="httpRequestExport"
                auto-upload
              >
                <el-button size="small" type="primary">+添加文件</el-button>
                <span>只能上传mp4文件，且不超过200M</span>
              </el-upload>
          </div>
          <div class="file-uploads" v-for="(item,index) in fileList" :key="index">
            <section>
                <i class="iconfont icon-wenjian"></i>
                <span>{{item.name}}</span>
                <i class="iconfont icon-shanchu1"></i>
            </section>
          </div>
          <div style="width: 78%; margin-left: 70px; position:absolute;bottom:30px" >
            <el-button size="mini" type="default" @click="cancel()"
              >返回</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import MD5 from "js-md5";
import HeaderTitle from "@/components/Headertitle/index";
import {
  fetchAdd,
  fetchGetData,
  fetchDetail,
} from "@/api/systemapi/restmanage.js";
export default {
  components: {
    HeaderTitle,
  },
  data() {
    return {
      entNum: "",
      titleList: [{ title: "业务设置" },{ title: "资料库" },{ title: "配置" }],
      fileList: [],
      infoForm: {
        name: "", // 视讯号码
        remark: "", // 密码
        sort: "",
        title:"",//标题
        content:""//内容
      },
    };
  },
  mounted() {
    const { entNum } = this.$route.query;
    this.entNum = entNum;
  },
  methods: {
    cancel() {
      this.$router.back()
    },
    saveAdd() {
      const p1 = new Promise((resolve, reject) => {
        this.$refs["ruleForm1"].validate((valid) => {
          if (valid) {
            resolve();
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      });
      Promise.all([p1]).then(() => {
        fetchAdd({ ...this.infoForm }).then((response) => {
          if (response.code == 0) {
            this.cancel();
          } else {
            this.$message({
              type: "error",
              message: response.msg,
            });
          }
        });
      });
    },
    // 批量导入文件
    httpRequestExport(param) {
      console.log(param, "param");
      let fileObj = param.file; // 相当于input里取得的files
      console.log(fileObj, "fileObj");
      let fd = new FormData(); // FormData 对象
      fd.append("file", fileObj); // 文件对象
      fd.append("meetingId", this.formObj.meetingId); // 文件对象
      fd.append("sessionId", this.formObj.sessionId); // 文件对象
      fd.append("agentId", this.formObj.agentId); // 文件对象
      fd.append("fileType", this.formObj.fileType); // 文件对象
      fd.append("skillId", this.formObj.skillId); // 文件对象
      fd.append("remark", this.formObj.remark); // 文件对象
      console.log(fd, "fd");
      fetchAdd(fd).then((res) => {
        if (res.code == 0) {
          this.fetchData();
          param.file = null
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    handleChange(file, fileList){
      this.fileList=fileList
      console.log(this.fileList,"pptFileListpptFileList")
    },
  },
};
</script>
<style lang="scss" scoped>
.app-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  .app-container {
    .block {
      width: 100%;
      height: 100%;
      background: #fff;
      .tab-container {
        width: 100%;
        padding: 20px 20px 10px;
        margin-top: 15px;
        .con-title {
          margin-bottom: 15px;
          font-size: 14px;
          color: #666;
        }
        .con-note{
          margin-bottom: 50px;
          font-size: 14px;
          color: #666;
        }
        .upload-file{
          display: flex;
            span{
                font-size: 14px;
                color: #666;
                padding-left:20px
            }
        }
        .file-uploads{
            overflow: auto;
          section{
              margin-top:25px;
              .icon-wenjian{
                  color:#7AB8FB;
              }
              span{
                  padding:0 55px 0 15px;
                  font-size: 14px; 
                  color: #666;
              }
          }
        }
      }
    }
  }
}
</style>
